<template>
<div class="password">
	<navSimple message="更新密码" ></navSimple>
	<div class="user-box">
		 				<div class="error-item"  v-show="errMsg">
		 					<i class="iconfont icon-warning "></i>
		 					<p class="error-msg">{{errMsg}}</p>
		 				</div>
						<div class="user-item">
			 				<label class="user-label" for="opassword"><i class="iconfont icon-password" ></i>
			 				</label>
			 				<input class='user-content' type='password' @focus="movetosight($event)" id="opassword" v-model="opassword"	placeholder="请现输入密码" autocomplete="off">
			 				
		 				</div>
		 				
		 				<div class="user-item">
			 				<label class="user-label" for="npassword"><i class="iconfont icon-password" ></i>
			 				</label>
			 				<input class='user-content' type='password' @focus="movetosight($event)" id="npassword" v-model="npassword"	placeholder="请输入新密码" autocomplete="off">
			 				
		 				</div>
		 				<div class="user-item">
			 				<label class="user-label" for="npassword-comfirm"><i class="iconfont icon-password" ></i>
			 				</label>
			 				<input class='user-content' type='password'  @focus="movetosight($event)" id="npassword-comfirm" v-model="npasswordcomfirm"	placeholder="请确认新密码" autocomplete="off">
			 				
		 				</div>
		 				<div  class="btn btn-submit" @click="doUpdatePassword()">更新密码</div>
		 </div>				
</div>
</template>

<script>
import 'common/css/reset.css';
import navSimple from"components/units/navSimple.vue";
var _user=require("common/util/server/userServer.js");


export default {

  name: 'password',
  components:{
  	navSimple
  },
   methods:{
  		movetosight(e){
  			let _this=this;
  			let panel=e.target;
  			setTimeout(function(){
  				panel.scrollIntoView(true);
  				panel.scrollIntoViewIfNeeded();
  			},200)
  		},
  		
  		doUpdatePassword(){
  			var _this=this;
  			if (!_mm.validate(this.opassword,'require')) {
			
			this.errMsg ='旧密码不能为空';
			

		}else if (!_mm.validate(this.npassword,'require')) {
		
			this.errMsg ='密码不能为空';
			
			
		}else if (!_mm.validate(this.npasswordcomfirm,'require')) {
		
			this.errMsg ='密码确认不能为空';
			
			
		}else if (this.npassword !== this.npasswordcomfirm) {
			this.errMsg ="两次密码输入不一致"
			
		}else{
			this.errMsg="";
			var userInfo= {
				passwordOld:this.opassword,
				passwordNew:this.npassword

			}
			_user.updateUserinfo(userInfo,
				function(res){
					window.alert("修改成功");
								},
				function(err){
					_this.errMsg=err.msg;
				})
		}

  		},
  },
  data () {
    return {
    	opassword:'',
    	npassword:'',
    	npasswordcomfirm:""
    }
  }
}
</script>

<style lang="stylus" scoped>
.user-box
	width:80%;
	margin:0 auto;
	.error-item
		height:50px
		width:100%
		margin-bottom:10px
	.user-item
		width:100%
		height:auto
		margin-bottom:10px
		border:.5px solid #bdbdbd
		color:#d3d3d3
		.user-label
			display:inline-block
			border-right:.5px solid #bfbfbf
			height:30px
			width:10%
			text-align:center 
			line-height:30px
			background:#f3f3f3
		.user-content
			height:30px
			width:80%
			display:inline-block
			padding:0
			border:0
			outline:none
	.btn
		height:50px
		width:100%
		background:rgb(222,64,43)
		color:white
		font-size:24px
		text-align:center
		line-height:50px
	.error-item
		height:80px
		width:100%
		border:.5px solid rgb(222,64,43)	
		text-align:center
		color:rgb(222,64,43)	
		background:#fde9e9
			
</style>